<template>
  <div class="page-container">
    <el-row :gutter="20">
      <!--左边的页面-->
      <el-col :span="6">
        <el-card class="box-card">
          <div style="height: 550px; overflow-y:auto;">
            <el-tree :data="treeData"
                     :props="defaultProps"
                     node-key="id"
                     @node-click="handleNodeClick">
            </el-tree>
          </div>
        </el-card>
      </el-col>

      <!-- 右边的页面-->
      <el-col :span="18" style="display: inline-block" id="elcol">
        <label>编辑费用类型</label>
        <el-form
          :model="dataForm"
          :rules="dataFormRules"
          label-width="80px"
          ref="dataForm"
          :size="size"
          label-position="right"
        >
          <el-form-item label="ID" prop="id" v-if="false">
            <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="编码" prop="number">
            <el-input v-model="dataForm.number" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="dataForm.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="创建人" prop="creator">
            <el-input v-model="dataForm.creator" auto-complete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="创建时间" prop="create_time">
            <el-input v-model="dataForm.create_time" auto-complete="off" :disabled="true"></el-input>
          </el-form-item>
        </el-form>
        <div style="text-align:center">
          <el-button
            :size="size"
            type="primary"
            @click.native="submitForm"
            :loading="editLoading"
          >{{$t('action.submit')}}</el-button>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import CyTable from "@/views/Core/CyTable";
  import KtButton from "@/views/Core/KtButton";
  import { format, formatDate } from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  export default {
    components: {
      KtButton,
      CyTable,
      TableColumnFilterDialog
    },
    data() {
      return {
        size: "small",
        filters: {
          shop_id: "",
          t: "productType"
        },
        optionType: [],
        table: {
          showOverflowTooltip: true,
          size: "mini",
          align: "left",
          totalSize: 0,
          content: [],
          // 分页信息
          pageRequest: {
            pageNum: 1,
            pageSize: 10
          },
        },
        filterColumns: [],
        columns: [
          {prop: "id", label: "序号", minWidth: 50},
          {prop: "text", label: "分类名称", minWidth: 120},
          {prop: "ptext", label: "父级分类", minWidth: 120, formatter:function (row, column, prop) {
            if(prop == undefined){
                return "-"
              } else {
                return prop
              }
            }},
          {prop: "sname", label: "所属店铺", minWidth: 120},
        ],
        colVisible: false,
        editLoading: false,
        operation: false, // true:新增, false:编辑
        editDialogVisible: false, // 新增编辑界面是否显示
        // 新增编辑界面数据
        dataForm: {
          id: "",
          number: "",
          name: "",
          creator: "",
          create_time: ""
        },
        dataFormRules: {
          number: [{ required: true, message: "请输入编码", trigger: "blur" }],
          name: [{ required: true, message: "请输入名称", trigger: "blur" }]
        },
        // 店铺树形
        treeData: [{
          id: 1,
          label: '费用类型管理',
          children: [{
            id: 2,
            label: '001.费用类型'
          },{
            id: 3,
            label: '002.费用'
          },{
            id: 4,
            label: '009.费用2'
          }]
        }],
        defaultProps: {
          children: "children",
          label: "label"
        },
        // logo上传
        imgUrl:this.utils.imgUploadUrl,
        dialogVisible: false
      };
    },
    mounted() {
      $("#elcol").hide();
      this.initColumns();
    },
    methods: {
      // 换页刷新
      refreshPageRequest: function(pageNum) {
        this.table.pageRequest.pageNum = pageNum;
        this.findPage();
      },
      // 换页刷新
      handleSizeChange: function(pageSize) {
        this.table.pageRequest.pageSize = pageSize;
        this.table.pageRequest.pageNum = 1;
        this.findPage();
      },
      // 获取分页数据
      findPage: function(data) {
        var this_ = this;
        this.filters.start = this.table.pageRequest.pageNum;
        this.filters.limit = this.table.pageRequest.pageSize;
        this.utils.request.queryUserPage(this.filters, function(res) {
          if (res.rows == null) {
            res.rows = [];
          }
          this_.table.content = res.rows;
          this_.table.totalSize = Number(res.total);
        });
      },
      // tree点击事件
      handleNodeClick(treeData) {
        if(treeData.id == 1){
          $("#elcol").hide();
        }
        if(treeData.id == 2){
          $("#elcol").show();
          this.dataForm = {id: 1, number: "001", name: "三A费用类型", creator: "superadmin", create_time: "2019-10-07"}
        }
        if(treeData.id == 3){
          $("#elcol").show();
          this.dataForm = {id: 2, number: "002", name: "4A", creator: "superadmin", create_time: "2019-10-07"}
        }
        if(treeData.id == 4){
          $("#elcol").show();
          this.dataForm = {id: 3, number: "009", name: "1233", creator: "superadmin", create_time: "2019-10-07"}
        }
      },

      submitForm: function() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
              var this_ = this;
              this_.$message({message: "操作成功", type: "success"});
              this_.dialogVisible = false;
            });
          }
        });
      },
      // 显示编辑界面
      handleEdit: function(params) {
        if (0 === params.row.parent_id) {
          params.row.parent_id = "";
        }
        this.editDialogVisible = true;
        this.operation = false;
        this.$nextTick(function() {
          this.dataForm = Object.assign({}, params.row);
        });
      },
      // 时间格式化
      dateFormat: function(row, column, cellValue, index) {
        return format(row[column.property]);
      },
      // 处理表格列过滤显示
      initColumns: function () {
        var temp = [];
        $.each(this.columns, function (key, val) {
          temp.push(val)
        })
        this.filterColumns = temp;
        this.findPage();
      },
      // logo上传
      logohandleAvatarSuccess(res, file) {
        this.dataForm.pic = res.data.imgUrl;
      },
      clearFiles () {
        this.$refs['my-upload'].clearFiles();
      }
    }
  };
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #2F4554;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .text {
    font-size: 20px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    min-height: 500px;
  }

</style>
